<template>
  <div class="extend">
    <button @click="visible = true">弹框</button>
    <button @click="handle">$Progress</button>
    <button @click="handleConfirm">$confirm</button>
    <ProgressBar v-if="visible" v-model="visible" />
  </div>
</template>

<script>
import ProgressBar from "./ProgressBar"
import "./progress"
import api from "@/api/mock"

export default {
  components: {
    ProgressBar,
  },
  data() {
    return {
      visible: false,
      params: {},
    }
  },
  methods: {
    handle() {
      this.$Progress(api.progressing, this.params)
        .then(res => {
          console.log(res)
        })
        .catch(err => {
          throw err
        })
    },
    handleConfirm() {
      this.$confirm("检测到未保存的内容，是否在离开页面前保存修改？", "确认信息", {
        distinguishCancelAndClose: true,
        confirmButtonText: "保存",
        cancelButtonText: "放弃修改",
      })
        .then(() => {
          this.$message({
            type: "info",
            message: "保存修改",
          })
        })
        .catch(action => {
          this.$message({
            type: "info",
            message: action === "cancel" ? "放弃保存并离开页面" : "停留在当前页面",
          })
        })
    },
  },
  created() {
    console.log("created")
  },
}
</script>

<style lang="less" scoped>
.extend {
}
</style>
